<template>
    <div class="bui-box ugc-mode" :style="styles" ga_event="ugc_item_click">
        <div v-if="item.ugc_data.ugc_images.length" class="bui-left ugc-mode-lbox" ga_event="ugc_img_click">
            <a class="img-wrap" :href="item.source_url" target="_blank">
                <img v-lazy="item.ugc_data.ugc_images[0]" class="lazy-load-img" />
            </a>
            <span class="pic-tip">{{item.ugc_data.ugc_images.length}}图</span>
        </div>
        <div class="ugc-mode-right ugc-mode-rbox">
            <div class="ugc-mode-rbox-inner">
                <div class="ugc-mode-user">
                    <a class="ugc-avatar" :href="item.ugc_data.ugc_user.open_url" target="_blank" ga_event="ugc_avatar_click">
                        <img v-lazy="item.ugc_data.ugc_user.avatar_url" />
                    </a>
                    <div class="ugc-desc">
                        <a class="ugc-name" :href="item.ugc_data.ugc_user.open_url" target="_blank" ga_event="ugc_name_click">
                            <span>{{item.ugc_data.ugc_user.name}}</span>
                            <tt-icon type="symbolv" size="16" color="#FEC346"></tt-icon>
                        </a>
                        <p class="ugc-meta">
                            <span v-if="item.ugc_data.ugc_user.is_following">已关注</span>
                            <span v-else>未关注</span>
                            <span v-if="item.ugc_data.ugc_user.user_auth_info.auth_info">&nbsp;·&nbsp;{{item.ugc_data.ugc_user.user_auth_info.auth_info}}</span>
                        </p>
                    </div>
                </div>
                <div class="ugc-mode-content" ga_event="ugc_content_click">
                    <a :href="item.source_url" target="_blank">{{item.ugc_data.content}}</a>
                </div>
                <div class="bui-box ugc-mode-footer">
                    <div class="bui-left ugc-mode-footer-left" ga_event="ugc_comment_click">
                        <a class="ugc-mode-action source" :href="item.source_url" target="_blank">{{item.ugc_data.digg_count | formatCount }}赞</a>
                        <a class="ugc-mode-action source" :href="item.source_url + '/#comment_area'" target="_blank">&nbsp;·&nbsp;{{item.ugc_data.comment_count | formatCount }}评论</a>
                        <a class="ugc-mode-action source" :href="item.source_url" target="_blank">&nbsp;·&nbsp;{{item.ugc_data.read_count | formatCount }}阅读</a>
                        <span class="ugc-mode-action">&nbsp;·&nbsp;{{item.time_ago}}</span>
                    </div>
                    <div class="bui-right">
                        <Dislike :group_id="item.group_id"></Dislike>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    @import './style/mode.less';

    .ugc-mode {
        .mode-base();

        &-lbox {
            position: relative;
            width: 158px;
            height: 158px;
            margin-right: 16px;
        }

        &-rbox {
            height: 100%;
            overflow: hidden;

            &:before {
                content: '';
                width: 0;
                font-size: 0;
                height: 100%;
                visibility: hidden;
                display: inline-block;
                vertical-align: middle;
            }
        }

        &-rbox-inner {
            display: inline-block;
            width: 100%;
            vertical-align: middle;
        }

        &-user {
            overflow: hidden;
            margin-bottom: 10px;
            margin-top: 6px;

            .ugc-avatar {
                float: left;
                width: 46px;
                height: 46px;
                margin-right:8px;
                border-radius: 50%;
                overflow: hidden;
                background: #e8e8e8;
                text-align: center;

                >img {
                    width: 100%;
                    height: 100%;

                    &[lazy=loading] {
                        width: 20px;
                        height: 100%;
                        margin: auto;
                    }
                }
            }

            .ugc-desc {
                overflow: hidden;

                .ugc-name {
                    display: block;
                    font-size: 18px;
                    line-height: 1;
                    color: #222;
                    margin: 3px 0 6px;

                    span {
                        display: inline-block;
                        vertical-align: middle;

                        &:hover {
                            color: #406599;
                        }
                    }
                }
                .ugc-meta {
                    line-height: 1;
                    font-size: 0;
                    color: #777;
                    span {
                        font-size: 14px;
                    }
                }
            }
        }

        &-content {
            font-size: 14px;
            color: #222;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            max-height: 57px;
            overflow: hidden;

            a {
                color: #222;

                &:hover {
                    color: #406599;
                }
            }
        }

        &-footer {
            margin-top: 10px;
        }

        &-footer-left {
            display: inline-block;
            font-size: 0;
            line-height: 20px;
        }

        &-action {
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            vertical-align: middle;

            &.source {
                color: #777;
                font-size: 14px;

                &:hover {
                    color: #406599;
                }
            }
        }
    }
</style>

<script>
  import Dislike from '../common/dislike.vue'
  import { numFormat } from '../../../../src/js/utils.js'

  export default {
    props: {
      item: {
        type: Object,
        default: {}
      }
    },
    computed: {
      styles() {
        let style = {};

        if (this.item.ugc_data.ugc_images.length) {
          style['height'] = '179px';
        }

        return style;
      }
    },
    components: {
      Dislike
    },
    filters: {
      formatCount: function (value) {
        if (!value) return '0'
        value = numFormat(value)
        return value
      }
    }
  };
</script>
